<template>
    <div id="main5" style="height: 220px;">

    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    mounted(){

var chartDom = document.getElementById('main5');
var myChart = echarts.init(chartDom);
var option;

option = {
  legend: {
    orient: 'vertical',
    x: 'right',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 335, name: 'A' },
        { value: 310, name: 'B' },
        { value: 234, name: 'C' },
        { value: 135, name: 'D' },
        { value: 1548, name: 'E' }
      ]
    }
  ]
};

option && myChart.setOption(option);
    }
}
</script>